<template>
    <div v-if="pageShow" class="add_enterprise_container">
        <div class="header"><Steps :steps="stepsData" :active="state.active" /></div>
        <component
            :is="currentStep"
            @apply="applyHandle"
            @stepChange="stepChangeHandle"
            :query="state.query"
            class="step-main" />
    </div>
</template>

<script setup>
import Steps from '@/components/Steps.vue';
import Step1 from './step1.vue';
import Step2 from './step2.vue';
import Step3 from './step3.vue';
import Step4 from './step4.vue';
import Step5 from './step5.vue';

import request from '@/request';
import storage from '@/commons/storage';
import { isNotEmpty } from '@/commons/utils';

import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { computed, reactive } from 'vue';

const route = useRoute();
const queryLoginNo = route.query.no;
const stepsData = [
    { title: '申请开户' },
    { title: '上传资料' },
    { title: '聚合支付报备' },
    { title: '微信开户意愿确认' },
    { title: '开通成功' }
];
const activeMap = { 1: 0, 2: 1, 8: 2, 9: 3, 10: 4 };
const state = reactive({
    // 当前步骤
    active: null,
    query: {
        // 企业维度 shopId 传 0
        shopId: location.pathname.includes('/finance/baohutong') ? storage.get('ZW-SHOPID') : 0
    }
});
// 当前显示步骤的页面
const currentStep = computed(() => {
    return [Step1, Step2, Step3, Step4, Step5][state.active];
});
const pageShow = computed(() => isNotEmpty(state.active));

// 切换步骤
const stepChangeHandle = () => {
    const arr = location.search.split('?');
    if (arr.length > 1) {
        const newArr = arr[1].split('&');
        const loginNo = newArr[0].split('=')[1];
        getInfo(loginNo);
    }
};

// 步骤一开通成功后，显示步骤二
const applyHandle = data => {
    Object.assign(state.query, data);
    state.active = activeMap[data.accountStatus];
};

// 获取步骤详情数据
const getInfo = async loginNo => {
    const { code, data, msg } = await request('baofuAccountInfoServ', { loginNo });
    if (code === 0) {
        Object.assign(state.query, data);
        state.active = activeMap[data.accountStatus];
    } else {
        ElMessage.error(msg);
    }
};

if (queryLoginNo) {
    getInfo(queryLoginNo);
} else {
    state.active = 0;
}
</script>

<style lang="scss" scoped>
.add_enterprise_container {
    max-width: 1620px;
    margin: 0 auto;
    line-height: 1;
    .header {
        padding: 25px 40px 66px;
        width: auto;
        text-align: center;
    }
    .step-main {
        padding: 0 60px;
    }
}
</style>
